import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ParticipantType } from "@/lib/types"

interface AddParticipantDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onSubmit: (name: string, type: ParticipantType) => void
}

export function AddParticipantDialog({
  open,
  onOpenChange,
  onSubmit,
}: AddParticipantDialogProps) {
  const [name, setName] = useState("")
  const [type, setType] = useState<ParticipantType>(ParticipantType.GUEST)

  const handleSubmit = () => {
    if (name.trim()) {
      onSubmit(name, type)
      setName("")
      setType(ParticipantType.GUEST)
      onOpenChange(false)
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>添加参与者</DialogTitle>
        </DialogHeader>
        <div className="grid gap-4 py-4">
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="name" className="text-right">
              名称
            </Label>
            <Input
              id="name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              className="col-span-3"
              placeholder="请输入参与者名称"
            />
          </div>
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="type" className="text-right">
              类型
            </Label>
            <Select value={type} onValueChange={(value) => setType(value as ParticipantType)}>
              <SelectTrigger id="type" className="col-span-3">
                <SelectValue placeholder="选择参与者类型" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value={ParticipantType.HOST}>主持人</SelectItem>
                <SelectItem value={ParticipantType.SPEAKER}>发言人</SelectItem>
                <SelectItem value={ParticipantType.GUEST}>嘉宾</SelectItem>
                <SelectItem value={ParticipantType.AUDIENCE}>观众</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
        <DialogFooter>
          <Button type="submit" onClick={handleSubmit}>
            添加
          </Button>
        </DialogFooter>
    </DialogContent>
    </Dialog>
  )
}
